<template>
  <div class="api-info">
    <h3 class="api-title">接口信息</h3>
    <div>
      <el-form ref="apiForm" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="接口编号：">
              <span>{{apiForm.id}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="接口名称：">
              <span>{{apiForm.name}}</span>
            </el-form-item>

          </el-col>

          <el-col :span="8">
            <el-form-item label="接口状态：">
              <el-tag>{{apiForm.status}}</el-tag>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="更新时间：">
              <span>{{apiForm.updateTime}}</span>
            </el-form-item>

          </el-col>

          <el-col :span="8">
            <el-form-item label="添加人员：">
              <span>{{apiForm.creator}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="接口路径：">
              <el-tag v-if="apiForm.method == 'GET'">{{apiForm.method}}</el-tag>
              <el-tag v-else-if="apiForm.method == 'POST'" type="success">{{apiForm.method}}</el-tag>
              <span>{{apiForm.path}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="接口描述：">
              <span>{{apiForm.message}}</span>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

    </div>

    <h3 class="api-title">request</h3>
    <div style="text-align:center">
      <el-radio-group v-model="apiForm.requestType">
        <el-radio disabled label="form">form</el-radio>
        <el-radio disabled label="json">json</el-radio>
        <el-radio disabled label="file">file</el-radio>
        <el-radio disabled label="row">row</el-radio>
      </el-radio-group>
    </div>

    <div>
      <div class="api-info-icon">
        <i class="el-icon-success"></i>
        <span>请求参数</span>
      </div>
      <el-table :data="params" border style="width: 100%" :header-cell-style="headerStyle">
        <el-table-column prop="name" label="参数名" width="180">
        </el-table-column>
        <el-table-column prop="must" label="是否必输" width="180">
        </el-table-column>
        <el-table-column prop="value" label="示例">
        </el-table-column>
        <el-table-column prop="remark" label="描述">
        </el-table-column>
      </el-table>
    </div>

    <div style="padding-top:15px">
      <div class="api-info-icon">
        <i class="el-icon-success"></i>
        <span>请求Headers</span>
      </div>
      <el-table :data="params" border style="width: 100%" :header-cell-style="headerStyle">
        <el-table-column prop="name" label="标签" width="180">
        </el-table-column>
        <el-table-column prop="value" label="示例">
        </el-table-column>
        <el-table-column prop="remark" label="描述">
        </el-table-column>
      </el-table>
    </div>

    <div style="padding-top:15px">
      <div class="api-info-icon">
        <i class="el-icon-success"></i>
        <span>请求Cookies</span>
      </div>
      <el-table :data="params" border style="width: 100%" :header-cell-style="headerStyle">
        <el-table-column prop="name" label="标签" width="180">
        </el-table-column>
        <el-table-column prop="value" label="示例">
        </el-table-column>
        <el-table-column prop="remark" label="描述">
        </el-table-column>
      </el-table>
    </div>

    <h3 class="api-title" style="margin-top: 15px">response</h3>
    <div>
      <el-tabs type="border-card" style="font-size: 13px;">
        <el-tab-pane label="成功示例">
          <json-view :data="apiForm" theme="one-dark" :font-size="13" />
        </el-tab-pane>
        <el-tab-pane label=" 失败示例">
          <!-- <json-view :data="headerStyle" theme="one-dark" :font-size="13" /> -->
          <vueJsonEditor v-model="headerStyle" :showBtns="false" :mode="'code'"></vueJsonEditor>
        </el-tab-pane>
      </el-tabs>

    </div>

  </div>
</template>

<script>
import jsonView from 'vue-json-views'
import vueJsonEditor from 'vue-json-editor'
export default {

  data () {
    return {
      apiForm: {
        id: 100,
        name: '1、登录接口',
        status: '已完成',
        updateTime: '2022-07-23 17:28',
        creator: '片言',
        path: '/api/login',
        method: 'POST',
        message: '登录接口，开发人：片言',
        requestType: 'json',
      },

      headerStyle: {
        'background-color': '#f2f2f2',
        'font-weight': 'bold',
        'color': 'rgb(39, 38, 38)',
        'heigth': '39px',
        'font-weight': '400',
        'font-size': '14px',

      },

      params: [{
        must: '是',
        name: 'account',
        value: 'assent',
        remark: '上海市普陀区金沙江路 1518 弄'
      }, {
        must: '是',
        name: 'account',
        value: 'assent',
        remark: '上海市普陀区金沙江路 1518 弄'
      }, {
        must: '是',
        name: 'account',
        value: 'assent',
        remark: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },

  components: {
    jsonView,
    vueJsonEditor
  }


}
</script>

<style scoped>
.api-title {
  font-size: 16px;
  clear: both;
  font-weight: 400;
  margin-top: 0.4rem;
  border-left: 3px solid #2395f1;
  padding-left: 8px;
  display: inline-block;
}

.api-info-icon {
  font-size: 13px;
}

.api-info >>> .el-table .el-table__cell {
  padding: 5px 0;
}
</style>